<script setup>
import {ref, defineEmits} from 'vue';
import {ElMessage} from "element-plus";

// 禁用日期
const disabledDate = (time) => {
  return time < new Date();
};
// 表单数据
const form = ref({
  name: '',
  type: '',
  path: '',
  createTime: '',
  description: '',
});
// 表单列表
const formList = ref(null);
// 定义事件
const emit = defineEmits(['close']);
// 关闭弹窗
const handleClose = () => {
  emit('close');
};
// 提交表单
const handleSubmit = () => {
  if (form.value.name && form.value.type && form.value.path && form.value.createTime && form.value.description) {
    ElMessage.success('提交成功');
    console.log(form.value);
    emit('close');
    form.value = {
      name: '',
      type: '',
      path: '',
      createTime: '',
      description: '',
    };
  } else {
    ElMessage.error('请填写完整信息');
  }
}

</script>

<template>
  <el-dialog title="新增资源" width="50%" @close="handleClose" draggable>
    <el-form ref="formList" :model="form" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="类别名称:">
            <el-input v-model="form.name" clearable placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源类型:">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option label="菜单" value="menu"></el-option>
              <el-option label="按钮" value="button"></el-option>
              <el-option label="接口" value="api"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="资源路径:">
            <el-input v-model="form.path" clearable placeholder="请输入"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建时间:">
            <el-date-picker
                v-model="form.createTime"
                type="datetime"
                placeholder="选择日期"
                :disabled-date="disabledDate"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="资源描述:">
            <el-input type="textarea" v-model="form.description" placeholder="请输入资源描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="handleClose">取 消</el-button>
      </span>
    </template>
  </el-dialog>

</template>

<style scoped>

</style>